<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="./css/bootstrap/bootstrap.min.css" />

    <title>购物车</title>
  </head>
  <body>
    <div id="app">
      <cart-component></cart-component>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="js/jQuery/jquery-3.4.1.slim.min.js"></script>
    <script src="js/bootstrap/popper.min.js"></script>
    <script src="js/bootstrap/bootstrap.min.js"></script>
    <script src="js/vue.js"></script>
    <script>
      //4. 声明cart-list组件
      Vue.component("cart-list", {
        template: `
		<div class="row justify-content-center mt-2">
          <div class="col-6 text-center">
            <table class="table table-striped table-bordered text-center mb-2">
              <thead>
                <tr>
                  <td>商品名称</td>
                  <td>价格</td>
                  <td>数量</td>
                  <td>操作</td>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>Java核心技术</td>
                  <td>100.00</td>
                  <td>
                    <div class="input-group input-group-sm">
                      <div class="input-group-prepend">
                        <button class="btn btn-outline-secondary" type="button">
                          -
                        </button>
                      </div>
                      <input
                        type="text"
                        style="width: 10px;"
                        class="form-control"
                      />
                      <div class="input-group-append">
                        <button class="btn btn-outline-secondary" type="button">
                          +
                        </button>
                      </div>
                    </div>
                  </td>
                  <td>
                    <button>删除</button>
                  </td>
                </tr>
                <tr>
                  <td>Java编程思想</td>
                  <td>100.00</td>
                  <td>
                    <div class="input-group input-group-sm">
                      <div class="input-group-prepend">
                        <button class="btn btn-outline-secondary" type="button">
                          -
                        </button>
                      </div>
                      <input
                        type="text"
                        style="width: 10px;"
                        class="form-control"
                      />
                      <div class="input-group-append">
                        <button class="btn btn-outline-secondary" type="button">
                          +
                        </button>
                      </div>
                    </div>
                  </td>
                  <td>
                    <button>删除</button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
			`,
      });
      //3.声明cart-total组件
      Vue.component("cart-total", {
        template: `
			<div class="row justify-content-center mb-2">
				<div class="col-6 text-right bg-success py-2">
					<strong>总价:1000</strong> <button>结算</button>
				</div>
            </div>
			`,
      });
      //2.声明cart-title组件
      Vue.component("cart-title", {
        template: `
			<div class="row justify-content-center">
				<div class="col-6 text-center bg-info py-3">
					<strong>我的购物车</strong>
				</div>
            </div>`,
      });
      //1. 声明cart-component组件
      Vue.component("cart-component", {
        template: `
	    <div class="container mt-5">
         <cart-title></cart-title>
         <cart-list></cart-list>
        <cart-total></cart-total>
      </div>`,
      });

      const vm = new Vue({
        el: "#app",
        data: {},
      });
    </script>
  </body>
</html>
